<template>
  <div class="el-pagination">
    <div v-show="layout.includes('total')">共{{ total }}条</div>
    <div>

      <select v-show="layout.includes('sizes')"  v-model="size">
        <option :value="item" v-for="(item, index) in pageSizes" :key="index">{{ item }} 条/页</option>
      </select>
    </div>
    <div   class="page">
      <span v-show="layout.includes('prev')"  > {{ prevText }}</span>

      <span :class="{active:currentPage==item}" v-for="(item, index) in pages" :key="index"> {{ item }}</span>

      <span v-show="layout.includes('next')" > {{ nextText }} </span>
    </div>
    <div v-show="layout.includes('jumper')" > 前往 <input type="text" :value="currentPage"> 页</div>
  </div>
</template>

<script setup>
import { defineProps, ref, computed } from 'vue';

let size = ref(100)


let props = defineProps({
  "layout": {
    type:String
  },
  'page-sizes': Array,
  total: Number,
  'prev-text': {
    type: String,
    default: "<"
  },
  'next-text': {
    type: String,
    default: ">"
  },
  'current-page': {
    type: Number,
  }
})
console.log(props);
let pages = computed({
  get: () => {
    return Math.ceil(props.total / size.value)
  }
})

</script>

<style  scoped>
.active{
  color: aqua;
}
.el-pagination div {
  float: left;
  margin-right: 10px;
}

.page span {
  padding: 10px;
}

input {
  width: 20px;
  text-align: center;
}
</style>